<template>
  <div>
    <!-- 搜索条件 -->
    <sky-card :shadow="'hover'">

      <el-form
        ref="dynamicValidateForm"
        class="form-search-panel"
        label-position="right"
        label-width="80px"
        :model="formLabelAlign"
      >
        <el-form-item
          label-width="0px"
          prop="orgn"
          :rules="[
            { required: true, message: '请输入组织机构', trigger: 'blur' }
          ]"
          class="w-800 a-line"
        >
          <div class="w-300">
            <sky-tree-select
              ref="treeSelect"
              v-model:keyword="formLabelAlign.orgn"
              label="组织机构"
              placeholder="搜索组织机构"
              :data="treeSelectData"
              :props="defaultProps"
              default-expand-all
              @node-click="handleNodeClick"
            />
          </div>
        </el-form-item>
        <div class="h-10" />
        <sky-folding-panel>
          <el-form-item
            label="名称"
            prop="name"
            :rules="[
              { required: true, message: '请输入名称', trigger: 'blur' }
            ]"
            class="w-300"
          >
            <el-input v-model="formLabelAlign.name" />
          </el-form-item>
          <el-form-item
            label="活动区域"
            prop="region"
            :rules="[
              { required: true, message: '请输入活动区域', trigger: 'blur' }
            ]"
            class="w-300"
          >
            <el-input v-model="formLabelAlign.region" />
          </el-form-item>
          <el-form-item
            label="活动形式"
            prop="type"
            :rules="[
              { required: true, message: '请输入活动形式', trigger: 'blur' }
            ]"
            class="w-300"
          >
            <el-input v-model="formLabelAlign.type" />
          </el-form-item>
          <el-form-item
            label-width="0px"
            class="w-800"
          >
            <sky-radio-group ref="radioRef" v-model="formLabelAlign.radio" label="选择电商">
              <sky-radio label="天猫" value="1" />
              <sky-radio label="淘宝" value="2" />
              <sky-radio label="拼多多" value="3" />
              <sky-radio label="蘑菇街" value="4" />
              <sky-radio label="京东" value="5" />
              <sky-radio label="聚划算" value="6" />
              <sky-radio label="小米商城" value="7" />
            </sky-radio-group>
          </el-form-item>
          <el-form-item label-width="0px" class="w-800">
            <sky-checkbox-group ref="checkboxRef" v-model="formLabelAlign.checkbox" label="兴趣爱好">
              <sky-checkbox label="全部" value="0" />
              <sky-checkbox label="篮球" value="1" />
              <sky-checkbox label="足球" value="2" />
              <sky-checkbox label="乒乓球" value="3" />
              <sky-checkbox label="网球" value="4" />
              <sky-checkbox label="羽毛球" value="5" />
              <sky-checkbox label="蹦迪" value="6" />
              <sky-checkbox label="打游戏" value="7" />
            </sky-checkbox-group>
          </el-form-item>
          <el-form-item label-width="0px" class="w-1000">
            <div class="search-btn-group">
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
            </div>
          </el-form-item>

        </sky-folding-panel>

      </el-form>

    </sky-card>

    <!-- 表格 -->
    <sky-panel title="容器面板">
      <template #header>
        <span>此处附标题</span>
      </template>
      <template #handle>
        <el-button type="primary">主要按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="info">信息按钮</el-button>
        <sky-dropdown>
          <sky-dropdown-item
            icon-class="el-icon-circle-plus-outline"
            @click="openAdd"
          >新增</sky-dropdown-item>
          <sky-dropdown-item icon-class="el-icon-edit">编辑</sky-dropdown-item>
          <sky-dropdown-item
            icon-class="el-icon-folder-delete
"
          >作废</sky-dropdown-item>
          <sky-dropdown-item
            icon-class="el-icon-download"
          >下载</sky-dropdown-item>
          <sky-dropdown-item icon-class="el-icon-upload">导出</sky-dropdown-item>
        </sky-dropdown>
      </template>
      <template #main>
        <sky-table ref="table" v-slot="row" :data="tableData">
          <sky-column :row="row.scope" prop="name" label="姓名" />
          <sky-column :row="row.scope" prop="age" label="年龄" />
          <sky-column :row="row.scope" prop="home" label="家庭住址" />
        </sky-table>

        <div class="clearfix">
          <el-pagination
            class="mt-20 fr"
            background
            layout="prev, pager, next"
            :total="1000"
          />
        </div>
      </template>
    </sky-panel>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { ElLoading } from 'element-plus'
import { useReset } from './hooks/index'
import { getTreeSelectData } from '_@/api/example/index'

export default defineComponent({
  setup() {
    const dynamicValidateForm = ref()

    const formLabelAlign = ref({
      orgn: '',
      name: '',
      region: '',
      type: '',
      radio: '1',
      checkbox: ['3', '6']
    })

    const tableData = [
      { name: 'szdew', age: 21, home: '中南海' },
      { name: 'szwrde', age: 21, home: '中南海' },
      { name: 'szwrde', age: 21, home: '中南海' },
      { name: 'szwrde', age: 21, home: '中南海' },
      { name: 'szwrde', age: 21, home: '中南海' }
    ]

    const defaultProps = {
      children: 'children',
      label: 'name'
    }

    const handleNodeClick = (data: any) => {
      console.log(data)
    }

    const openAdd = () => {
      window.open('#/page-template/button/add')
    }

    const search = () => {
      dynamicValidateForm.value.validate((valid: any) => {
        if (valid) {
          console.log(formLabelAlign.value)
          alert(JSON.stringify(formLabelAlign.value))
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
    // const loadingInstance = ElLoading.service({
    //   lock: true,
    //   text: 'Loading',
    //   spinner: 'el-icon-loading',
    //   background: 'rgba(0, 0, 0, 0.7)'
    // })
    // setTimeout(() => {
    //   loadingInstance.close()
    // }, 500)

    const { radioRef, checkboxRef, treeSelect, resetSearch } = useReset()

    const reset = () => {
      resetSearch()
      dynamicValidateForm.value.resetFields()
    }

    /**
 *
 *
 * 生成树结构
 *
 *
 */
    const differentiateTree = function(arr: any, rule = { parentId: 'nodeParentId', id: 'nodeId', startParentId: null }) {
      const arrcloned = [...arr]
      const handle = (id: number) => {
        const arr: any[] = []
        arrcloned.forEach(folder => {
          if (folder[rule.parentId] === id) {
            const children = handle(folder[rule.id])

            if (folder.children) {
              folder.children = [].concat(folder.children, children as any)
            } else {
              // eslint-disable-next-line no-empty
              if (children.length === 0) {
              } else {
                folder.children = children
              }
            }
            // folder.title = folder.name
            arr.push(folder)
          }
        })
        return arr
      }
      return handle(rule.startParentId as any)
    }

    const treeSelectData = ref([])
    const getTreeFunc = async() => {
      const { data: { list }} = await getTreeSelectData({})
      console.log('list', list)
      treeSelectData.value = differentiateTree(list, { parentId: 'pId', id: 'id', startParentId: null }) as any
      console.log('treeSelectData', treeSelectData.value)
    }

    getTreeFunc()

    return {
      radioRef,
      checkboxRef,
      treeSelect,
      resetSearch,
      openAdd,
      dynamicValidateForm,
      treeSelectData,
      formLabelAlign,
      tableData,
      defaultProps,
      search,
      reset,
      handleNodeClick
    }
  }
})
</script>
